<!DOCTYPE html>
<head>
    <title>我的第三个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <p>--------------------------计算属性---------------------------</p>
    <div id="d1">
        {{message.split('').reverse().join('')}}
    </div>
    <br/><br/>

    <p>--------------------------计算属性getter---------------------------</p>
    <div id="d2">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <br/><br/>


    <p>--------------------------计算属性方法---------------------------</p>
    <div id="d3">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage() }}"</p>

        <p>Computed reversed message: "{{ nowDate }}"</p>
    </div>
    <br/><br/>

    <p>--------------------------计算属性的setter---------------------------</p>
    <div id="d4">
        <p>{{fullname}}</p>
    </div>
    <br/><br/>

    <div id="d5">
        <p>{{fullname}}</p>
    </div>
    <br/><br/>


    <p>--------------------------侦听器---------------------------</p>
    <div id="watchDemo">
        <p>
            Ask a yes/no question:
            <input v-model="question">
          </p>
          <p>{{ answer }}</p>
    </div>


</body>


<script>
    var vm1 = new Vue({
        el:"#d1",
        data:{
            message:"hello world!"
        }
    })

    var vm2 = new Vue({
        el:"#d2",
        data:{
            message:"hello world!"
        },
        computed:{
            //计算属性的getter
            //这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：
            reversedMessage: function(){
                //this指向vm实例
                return this.message.split('').reverse().join('')
            }
        }
    })

    //通过方法达到相同的效果
    //computed和methods都能达到相同的效果
    var vm3 = new Vue({
        el:'#d3',
        data:{ message:"hello world!"},
        methods:{
            reversedMessage :function(){
                return this.message.split('').reverse().join('')
            }
        },
        computed:{
            nowDate: function(){
                return Date.now()
            }
        }
    })

 
    //computed赋值
    var vm4 = new Vue({
        el:'#d4',
        data:{ 
            firstname: "coco",
            lastname: "cola"
        },
        computed:{
            fullname:function(){
                return this.firstname+" "+this.lastname
            }
        }
    })

    var data5={firstName:"",lastName:""}
    //计算属性的 setter，赋值
    //在vue中定义data:{firstName:"",lastName:""}和在外面定义data5丢进去，效果一样
    var vm5 = new Vue({
        el:'#d5',
        // data:{ 
        //     firstName: "",
        //     lastName: ""
        // },
        data: data5,
        computed:{
            fullname:{
                 // getter
                get: function(){
                    console.log('d5 get')
                return this.firstName + ' ' + this.lastName
                },
                 // setter
                set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
                console.log(this.firstName)
                console.log(this.lastName)
                }

            }
          
        }
    })
    //现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
    //vm5有3个字段属性，一个是fullName,2个时data里面定义的firstName和lastName
    vm5.fullname = 'John Doe'

    // console.log("vue5.firstName = "+vm5.firstName)//vue5.firstName = John
    // console.log("vue5.lastName = "+vm5.lastName)//vue5.firstName = Doe
    // console.log("vue5.fullName = "+vm5.fullname)//vue5.fullname = John Doe
    /**
     * 
    d5 get
    John
    Doe
    d5 get
    执行顺序 vm.full=name get方式,set方法
     * 
    */




    /**
     * 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供
     * 了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
     * 
     * 在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
    */
    var watchDemo = new Vue({
        el:"#watchDemo",
        data:{
            question:'',
            answer:'你问我才能给你答案'
        },
        watch:{
            //如果question 发生改变，这个函数就会运行
            question:function(newQuestion,oldQuestion){
                this.answer = 'waiting for you to stop typing'
                this.debouncedGetAnswer()
            }
        },
        created:function(){
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
        },
        methods:{
            getAnswer:function(){
                if(this.question.indexOf('?')===-1){
                    this.answer = "Questions usually contain a question mark '?'"
                    return
                }
                this.answer='思考ing...'
                var vm = this
                axios.get('https//yesno.wtf/api')
                .then(function (response){
                    vm.answer= _.capitalize(response.data.answer)
                })
                .catch(function(erorr){
                    vm.answer='error! 不能访问api'+erorr
                })
            }
        }
    })




</script>

</html>